import { Card, Avatar, Upload } from 'antd'
import { useSelector } from 'react-redux'
import { StoreType, UserInfoType } from '../../interface'
import { getCookie, getUserInfo } from '../../utils'


const MyInfo = () => {

    const userInfo = useSelector((state: StoreType) => {
        return state.userInfo as UserInfoType
    })

    // 上传头像时触发的回调函数
    const upLoadFile = (file:any) => {
        if(file.file.response) {
            // 上传成功
            getUserInfo()
        }
    }

    return <div className="public">
        {/* 头像名称信息卡片 */}
        <Card>
            <div>
                <Upload
                    // 上传地址
                    action="/api/ossUpLoad"
                    showUploadList={false}
                    headers={{authorization: getCookie() as string}}
                    onChange={upLoadFile}
                >
                    <Avatar src={userInfo.img} />

                </Upload>
            </div>
            <div>
                <h3>{userInfo.name}</h3>
            </div>
        </Card>
        {/* 基本信息卡片 */}
        <Card title="基本信息">
            <div className="my-info-item">
                <p>用户名称：</p>
                <span>{userInfo.name}</span>
            </div>
            <div className="my-info-item">
                <p>用户名称：</p>
                <span>{userInfo.name}</span>
            </div>
            <div className="my-info-item">
                <p>用户ID：</p>
                <span>{userInfo.id}</span>
            </div>
            <div className="my-info-item">
                <p>性别  ：</p>
                <span>{userInfo.sex ? '女' : "男"}</span>
            </div>
            <div className="my-info-item">
                <p>个人简介:</p>
                <span>{userInfo.info || '-'}</span>
            </div>
            <div className="my-info-item">
                <p>所在地区:</p>
                <span>{userInfo.address || '-'}</span>
            </div>
        </Card>
    </div>
}

export default MyInfo